/**
 * @description 页面设置
 * @author 大肘子
 */

import React, { FC, useEffect } from "react";
import { Form, Input } from "antd";
import useGetPageInfo_redux from "../../../hooks/useGetPageInfo_redux";
import { resetPageInfo } from "../../../store/pageInfoReducer";
import { useDispatch } from "react-redux";
const { TextArea } = Input;
const PageSetting: FC = () => {
  const dispatch = useDispatch();
  const { title, desc, css, js } = useGetPageInfo_redux();
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ title, desc, css, js });
  }, [title, desc, css, js]);

  function handleChange() {
    const values = form.getFieldsValue();
    dispatch(resetPageInfo(values));
  }

  return (
    <Form initialValues={{ title, desc, css, js }} layout="vertical" form={form} onValuesChange={handleChange}>
      <Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入..." }]}>
        <Input placeholder="请输入..." />
      </Form.Item>

      <Form.Item label="问卷描述" name="desc">
        <TextArea placeholder="请输入..." rows={3} />
      </Form.Item>
      <Form.Item label="样式代码" name="css">
        <TextArea placeholder="请输入..." rows={3} />
      </Form.Item>
      <Form.Item label="脚本代码" name="js">
        <TextArea placeholder="请输入..." rows={3} />
      </Form.Item>
    </Form>
  );
};

export default PageSetting;
